<template>
    <div class="project-area">
        <div class="top-title">
            项目-分地域
        </div>
        <div class="top-radio">
            <el-radio-group v-model="topRadio">
                <el-radio-button label="0">全部</el-radio-button>
                <el-radio-button label="2">自定义</el-radio-button>
            </el-radio-group>
            <el-date-picker v-model="topDate" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" style="margin-left: 200px;" :disabled="topRadio == 0">
            </el-date-picker>
        </div>
        <div class="mid-context">
            <div class="left-context">
                <div class="right-button">
                    <el-button type="primary">地域明细</el-button>
                    <el-link type="info">TOP10</el-link>
                    <el-link type="primary" @click="toAddDetail">查看全部</el-link>
                </div>
                <el-table :data="tableData" border style="margin-top: 20px;">
                    <el-table-column prop="date" label="地域" :align="tableAlign">
                    </el-table-column>
                    <el-table-column prop="date" label="已合作" :align="tableAlign">
                    </el-table-column>
                    <el-table-column prop="name" label="停止合作" :align="tableAlign">
                    </el-table-column>
                    <el-table-column prop="address" label="项目总数" :align="tableAlign">
                    </el-table-column>
                </el-table>
            </div>
            <div class="right-context">
                <div class="right-button">
                    <el-button type="primary" style="margin-top: 20px;">地域明细</el-button>
                </div>

                <el-table :data="tableData" border style="margin-top: 20px;">
                    <el-table-column prop="date" label="类目" :align="tableAlign">
                    </el-table-column>
                    <el-table-column prop="date" label="已合作" :align="tableAlign">
                    </el-table-column>
                    <el-table-column prop="name" label="停止合作" :align="tableAlign">
                    </el-table-column>
                    <el-table-column prop="address" label="合计" :align="tableAlign">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            topRadio:'0',
            topDate:'',
            tableAlign:'center',
        }
    },
    methods: {
        toAddDetail(){
            this.$router.push({ path: "/dashboard/areaDetail" });
        }
    },
}
</script>
<style lang="scss" scoped>
.project-area {
    margin-top: 30px;
    width: 100%;

    .top-title {
        border-left: 8px solid #409eff;
        margin: 20px 0;
        padding: 3px 0 3px 25px;
        font-size: 18px;
        font-weight: bold;
    }

    .top-radio {
        display: flex;
        justify-content: center;
    }

    .mid-context {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .left-context {
            width: 47%;
            .right-button {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 20px;
            }
        }

        .right-context {
            width: 47%;

            .right-button {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
    }
}
</style>